<template>
    <div class="dangan clearfix">
        <section class="content-header">
            大用户档案管理&nbsp;/&nbsp;档案管理
        </section>
        <section class="title">
            <div class="find">
                <div class="clearfix">
                    <div class="col-md-3 clearfix">
                        <yingyesuo v-model="form.deptId" />
                    </div>
                    <div class="col-md-3 clearfix">
                        <pianqu v-model="form.areaId" :areaId="form.deptId" />
                    </div>
                    <div class="col-md-3 clearfix">
                        <yonghu-type v-model="form.userType" />
                    </div>
                    <div class="col-md-3 clearfix">
                        <label class="col-md-4 control-label">用户名称：</label>
                        <div class="col-md-8">
                            <input type="email" class="form-control" placeholder="请输入用户名称" v-model="form.userName">
                        </div>
                    </div>
                </div>
                <div class="clearfix">
                    <div class="col-md-3 clearfix">
                        <hangye v-model="form.businessType" />
                    </div>
                    <div class="col-md-3 clearfix">
                        <yongshui-type v-model="form.waterType" />
                    </div>
                    <div class="col-md-3 clearfix">
                        <label class="col-md-4 control-label">用户编号：</label>
                        <div class="col-md-8">
                            <input type="email" class="form-control" placeholder="请输入用户编号" v-model="form.userNum">
                        </div>
                    </div>
                    <div class="col-md-1 col-md-offset-1 clearfix">
                        <button type="button" class="btn btn-primary" @click="$refs.page.getList(1)">查询</button>
                    </div>
                    <div class="col-md-1 clearfix">
                        <button type="button" class="btn btn-primary" @click="reset()">重置</button>
                    </div>
                </div>
            </div>
            <div class="row" style="margin:0 5px;padding-bottom:10px;">
                <router-link to="add" style="display:inline-block;margin-right:50px;">
                    <button type="button" class="btn btn-primary">
                        <i class="fa fa-plus" aria-hidden="true"></i>&nbsp;新增</button>
                </router-link>
                <router-link to="" style="display:inline-block;margin-right:50px;">
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
                        <i class="fa fa-times" aria-hidden="true"></i>&nbsp;删除</button>
                </router-link>
                <router-link to="" style="display:inline-block;margin-right:50px;">
                    <button type="button" class="btn btn-primary">
                        <i class="fa fa-sign-in" aria-hidden="true"></i>&nbsp;导入</button>
                </router-link>
                <router-link to="" style="display:inline-block;margin-right:50px;">
                    <button type="button" class="btn btn-primary">
                        <i class="fa fa-sign-out" aria-hidden="true"></i>&nbsp;导出</button>
                </router-link>
            </div>
        </section>
        <section class="main clearfix">
            <div class="box">
                <div class="box-body">
                    <table id="example" class="table table-bordered table-hover" style="font-size:14px;text-align:center">
                        <thead style="font-weight:700">
                            <tr>
                                <td><input type="checkbox" ref="shuaxin" :checked="list.length===deleteId.length && deleteId.length" @click="checkedAll"></td>
                                <td>用户编号</td>
                                <td>用户名称</td>
                                <td>用户类型</td>
                                <td>行业</td>
                                <td>所属营业所</td>
                                <td>所属片区</td>
                                <td>用水类型</td>
                                <td>平均年用水量(万方)</td>
                                <td>操作</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-if="list.length==0">
                                <td colspan="999">暂无数据</td>
                            </tr>
                            <tr v-for="item in list" :key="item.value">
                                <td><input type="checkbox" :checked="deleteId.indexOf(item.userNum)>=0" name="checkboxinput" class="input-checkbox" @click="checkedOne(item.userNum)"></td>
                                <td>{{item.userNum}}</td>
                                <td>{{item.userName}}</td>
                                <td>{{item.userTypeName}}</td>
                                <td>{{item.businessTypeName}}</td>
                                <td>{{item.deptName}}</td>
                                <td>{{item.areaName}}</td>
                                <td>{{item.waterTypeName}}</td>
                                <td>{{item.supplyYear}}</td>
                                <td>
                                    <router-link :to="{path:'details',query:{userNum:item.userNum}}">查看</router-link>
                                    <i style="width:30px;display:inline-block"></i>
                                    <router-link :to="{path:'update',query:{userNum:item.userNum}}">修改</router-link>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </section>
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span></button>
                        <h4 class="modal-title">删除</h4>
                    </div>
                    <div class="modal-body">
                        <p>删除后不可恢复！确定删除所选用户？</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" data-dismiss="modal" @click="deleteItem">确定</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
        </div>
        <div class="col-md-offset-8 col-md-4 clearfix" style="margin-top:20px;">
            <ctrlPage :setPage="getList" :type="type" ref="page" />
        </div>
    </div>
</template>

<script>
import pianqu from "@/components/common/area.vue";
import hangye from "@/components/common/hangye.vue";
import yingyesuo from "@/components/common/yingyesuo.vue";
import yonghuType from "@/components/common/yonghuType.vue";
import yongshuiType from "@/components/common/yongshuiType.vue";
import ctrlPage from "@/components/common/ctrlPage.vue";

export default {
    data() {
        return {
            type: "total, prev, pager, next, jumper",
            form: {
                areaId: "",
                deptId: "",
                userNum: "",
                userName: "",
                userType: "",
                businessType: "",
                waterType: ""
            },
            list: [],
            total: "",
            deleteId: [],
            deleteList: '',
            isCheckedAll: false,

        }
    },
    components: {
        pianqu, hangye, yingyesuo, yonghuType, yongshuiType, ctrlPage
    },
    watch: {
        //根据删除的行的id加入list
        'deleteId'() {
            this.deleteList = '';
            this.deleteId.forEach(item => {
                this.deleteList += `${item},`;
            });
            this.deleteList = this.deleteList.substr(0, this.deleteList.length - 1);
        }
    },
    mounted() {
        this.$refs.page.getList(1);
    },
    methods: {
        //获取档案列表
        getList(pageIndex, pageSizes, callback) {
            this.$api.biguser.recordList({
                pageNum: pageIndex || 1,
                pageSize: pageSizes || 3,
                areaId: this.form.areaId,
                deptId: this.form.deptId,
                userNum: this.form.userNum,
                userName: this.form.userName,
                userType: this.form.userType,
                businessType: this.form.businessType,
                waterType: this.form.waterType
            }).then(res => {
                if (res.success) {
                    // console.log(res.data)
                    this.list = res.data.list
                    this.total = res.data.total;
                    callback(this.list, this.total);
                }
            });
        },
        //是否选择
        checkedOne(id) {
            let idIndex = this.deleteId.indexOf(id)
            if (idIndex >= 0) {//如果已经包含就去除
                this.deleteId.splice(idIndex, 1)
            } else {//如果没有包含就添加
                this.deleteId.push(id)
            }
        },
        //控制全选按钮
        checkedAll(e) {
            this.isCheckedAll = e.target.checked;
            if (this.isCheckedAll) {//全选时
                this.deleteId = []
                this.list.forEach(item => {
                    this.deleteId.push(item.userNum)
                })
            } else {
                this.deleteId = []
            }
        },
        //批量删除
        deleteItem() {
            // console.log(this.deleteList)
            this.$api.biguser.removebiguser({
                strs: this.deleteList
            }).then(res => {
                if (res.success) {
                    // console.log(res.data)
                    // this.enterpriseList = res.data
                    this.$$message({
                        message: "删除成功！",
                        type: "success"
                    });
                    this.$refs.page.getList(1);
                }
            });
        },
        //重置查询条件
        reset() {
            this.form.deptId = ""
            this.form.userNum = ""
            this.form.userName = ""
            this.form.userType = ""
            this.form.businessType = ""
            this.form.waterType = ""
            this.form.areaId = ""
        }
    }
}
</script>

<style>
</style>
